嗨大家今天過得好嗎？今天想來聊聊 Skelton 的功能並且以 Facebook 推出的 Shimmer 為主題，什麼是 Skelton 的功能呢？其實就是在內容載入前先顯示 Placeholder 的畫面， 一方面讓使用者知道網路正在載入中，另一方面又可以先提示載入的內容版面，例如有圖片、標題等等，比起 ProgressBar 的 loading 使用 Shimmer 又可以讓提示變得更豐富。

設定 Layout

要完成 Shimmer 的效果需要的 Layout 有用來顯示的 ShimmerFrameLayout 以及 Place holder layout。Place holder layout 就依據列表頁的樣式大概模擬，比較麻煩的是 ShimmerFrameLayout 為了讓專案中的很多頁面都能用到，應該要放在 Activity 的 layout 裡，需要的 Fragment 再去呼叫 Activity 的方法透過 ShimmerFrameLayout.startShimmerAnimation() 顯示載入動畫，等資料載入完成後再呼叫 ShimmerFrameLayout.stopShimmerAnimation 停止動畫。

// Place holder layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="76dp"
    android:background="?attr/themeBackgroundColor"
    style="@style/RippleEffect"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/cover"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_centerVertical="true"
        android:layout_marginStart="20dp"
        android:src="@drawable/cover_placeholder"
        />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/cover"
        android:layout_toStartOf="@id/moreButton"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:orientation="vertical"
        android:layout_centerVertical="true">

        <View
            android:layout_width="80dp"
            android:layout_height="20dp"
            android:background="@color/gray"
            android:layout_marginBottom="2dp"
            />

        <View
            android:layout_width="150dp"
            android:layout_height="20dp"
            android:background="@color/gray"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="2dp"
            />
    </LinearLayout>

    <ImageView
        android:id="@+id/moreButton"
        android:src="@drawable/ic_list_more"
        android:background="@android:color/transparent"
        android:layout_marginEnd="20dp"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true" />

</RelativeLayout>

// 加入 ShimmerFrameLayout 的 Activity layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.facebook.shimmer.ShimmerFrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_above="@id/bottomTabs"
        android:visibility="gone"
        android:id="@+id/shimmer_container">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <include layout="@layout/playableitem_shimmer_placeholder"/>

            <include layout="@layout/playableitem_shimmer_placeholder"/>

            <include layout="@layout/playableitem_shimmer_placeholder"/>

            <include layout="@layout/playableitem_shimmer_placeholder"/>

            <include layout="@layout/playableitem_shimmer_placeholder"/>

        </LinearLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomTabs"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:background="?attr/themeBackgroundColor"
        android:elevation="10dp"
        app:elevation="10dp"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@color/tab_colors_selector"
        app:itemHorizontalTranslationEnabled="false"
        app:itemTextColor="@color/tab_colors_selector"
        app:menu="@menu/menu_navigation_center_fab" />
</RelativeLayout>

Activity 設定

在 Activity 顯示動畫和停止動畫，天啊也太輕鬆。

fun showShimmerAnimation(show: Boolean) {
    if (show) {
        shimmer_container.startShimmerAnimation()
        shimmer_container.beVisible()
    } else {
        shimmer_container.stopShimmerAnimation()
        shimmer_container.beGone()
    }
}

其實 Shimmer 的 library 真的蠻好上手的，但每一頁可以顯示 place holder 的高度也不太一樣，如果有特殊高度就要另外設定，另外 Fragment 在 onDestroy 的階段也要讓已經顯示的 Shimmer 效果消失。今天 ( 湊篇數 ) 的 Shimmer library 分享告個段落，明天繼續分享另外一個做 Skelton 效果的 Skelton library，喜歡今天分享的內容的邦友請繼續關注「打造一個厲害的普通 Android App - 使用者體驗優化」的主題，我們明天見。